<%--
  Created by IntelliJ IDEA.
  User: 刘弗莫尔
  Date: 2021/10/15
  Time: 16:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>baidu搜索效果引用</title>
</head>
<style>
  #q{
    width: 500px;
    height: 30px;
    border:1px solid #ddd;
    line-height: 30px;
    display: block;
    margin: 0 auto;
    padding: 0 10px;
    font-size: 14px;
  }
  #ul{
    width: 520px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    border:1px solid #ddd;
    margin-top: -1px;
    display: none;
  }
  #ul li{
    line-height: 30px;
    padding: 0 10px;
  }
  #ul li:hover{
    background-color: #dddddd;
    color: #fff;
  }
</style>
<script>

  // 2.步骤二
  // 定义demo函数 (分析接口、数据)
  function demo(data){
    var Ul = document.getElementById('ul');
    var html = '';
    // 如果搜索数据存在 把内容添加进去
    if (data.s.length) {
      // 隐藏掉的ul显示出来
      Ul.style.display = 'block';
      // 搜索到的数据循环追加到li里
      for(var i = 0;i<data.s.length;i++){
        html += '<li>'+data.s[i]+'</li>';
      }
      // 循环的li写入ul
      Ul.innerHTML = html;
    }
  }

  // 1.步骤一
  window.onload = function(){
    // 获取输入框和ul
    var Q = document.getElementById('q');
    var Ul = document.getElementById('ul');

    // 事件鼠标抬起时候
    Q.onkeyup = function(){
      // 如果输入框不等于空
      if (this.value != '') {
        // ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
        // 创建标签
        var script = document.createElement('script');
        //给定要跨域的地址 赋值给src
        //这里是要请求的跨域的地址 我写的是百度搜索的跨域地址
        script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=demo';
        // 将组合好的带src的script标签追加到body里
        document.body.appendChild(script);
      }
    }
  }
</script>
</head>

<body>
<input type="text" id="q" />
<ul id="ul">

</ul>
</body>
</html>
